<template>
  <div class="m-container flex flex-row w-full">
    <div style="width: 20%;height: 100%;">
      <el-menu
        style="height: 100%;"
        default-active="2"
        class="el-menu-vertical-demo"
      >
        <el-menu-item
          index="2"
          @click="changeInfo"
        >
          <el-icon>
            <Postcard />
          </el-icon>
          <span>我的信息</span>
        </el-menu-item>
        <el-menu-item
          index="4"
          @click="changeAvatar"
        >
          <el-icon>
            <Avatar />
          </el-icon>
          <span>我的头像</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div
      v-if="page === 'info'"
      class="w-[80%] py-[30px] flex items-center justify-center"
    >
      <el-form
        style="width: 80%;"
        label-width="120px"
      >
        <el-form-item label="昵称">
          <el-input v-model="userStore.userinfo.name" />
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group
            v-model="userStore.userinfo.gender"
            @change="handleGenderChange"
          >
            <el-radio label="0">男</el-radio>
            <el-radio label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="userStore.userinfo.phone" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="userStore.userinfo.email" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-model="userStore.userinfo.remark"
            :rows="8"
            type="textarea"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            style="margin-left: 79%;"
            @click="onSubmit"
          >保存</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div
      v-else
      class="w-[80%] py-[30px] flex items-center justify-center"
    >
      <div class="flex flex-row items-center justify-around w-full">
        <div>
          <el-upload class="avatar-uploader">
            <img
              :src="userStore.userinfo.avatar"
              class="avatar"
            />
          </el-upload>
        </div>
        <div>
          <el-icon style="font-size: 80px;">
            <Right />
          </el-icon>
        </div>
        <div>
          <el-upload
            class="avatar-uploader"
            action="http://101.34.248.54:8092/api/wuli-file/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img
              v-if="imageUrl"
              :src="imageUrl"
              class="avatar"
            />
            <el-icon
              v-else
              class="avatar-uploader-icon"
            >
              <Plus />
            </el-icon>
          </el-upload>
        </div>
        <el-button
          type="primary"
          class="text-center"
          @click="onSubmit"
        >保存</el-button>
      </div>
    </div>
  </div>

</template>

<script lang="ts" setup>
import { Postcard, Avatar, Right, Plus } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import type { UploadProps } from 'element-plus'
import service from '../../service/service'
import { useUserStore } from '../../stores/user'
const userStore = useUserStore()

const page = ref('info')
const changeInfo = () => {
  page.value = 'info'
}

const changeAvatar = () => {
  page.value = 'avatar'
}

const handleGenderChange = (value: any) => {
  userStore.userinfo.gender = value
}

const onSubmit = () => {
  userStore.userinfo.avatar = imageUrl.value
  service({
    method: 'post',
    url: '/wuli-user/update',
    data: { data: userStore.userinfo },
  }).then((result) => {
    if (result.data.code === 200) {
      imageUrl.value = ''
      ElMessage({
        message: '修改成功',
        type: 'success',
      })
    } else {
      ElMessage({
        message: '修改失败',
        type: 'error',
      })
    }
  })
}

const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  imageUrl.value =
    'http://101.34.248.54:8092/api/wuli-file/download?filename=' + response.data
}
</script>

<style scoped>
.m-container {
  margin-top: 10px;
  background-color: white;
  box-shadow: 12.5px 12.5px 10px rgba(0, 0, 0, 0.024),
    100px 100px 80px rgba(0, 0, 0, 0.07);
}

.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>